<template>
    <div class="app-container checked">
      <div class="filter-container">
        <el-input v-model="query.query.partnerName" placeholder="请输入客户名称" clearable @keyup.enter.native="search" />
        <el-date-picker v-model="q_p_formDate1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="q_p_selectTimecreate" />
        <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('table.search') }}</el-button>
        <el-button @click="handleExport(1)" type="primary" icon="el-icon-download">
            货品销售汇总导出
        </el-button>
        <el-button @click="handleExport(2)" type="primary" icon="el-icon-download">
            货品销售明细导出
        </el-button>
        <el-button @click="handleExport(3)" type="primary" icon="el-icon-download">
            客户销售汇总导出
        </el-button>
        <el-button @click="handleExport(4)" type="primary" icon="el-icon-download">
            客户销售明细导出
        </el-button>
      </div>
      <el-table :data="tableData" highlight-current-row border @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="customerCode" label="客户编码" />
        <el-table-column prop="customerName" label="客户名称" />
        <el-table-column prop="billingDate" label="开单日期">
          <template slot-scope="{ row: { billingDate } }">
            {{ getMoment(billingDate) }}
          </template>
        </el-table-column>
        <el-table-column label="单据编号" prop="documentNumber" />
        <el-table-column prop="productCode" label="货品编码" />
        <el-table-column prop="productName" label="货品名称" />
        <el-table-column prop="specification" label="规格" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="originalPrice" label="原始单价" />
        <el-table-column prop="discountRate" label="折扣率(%)" />
        <el-table-column prop="unitPrice" label="单价" />
        <el-table-column prop="taxRate" label="税率" />
        <el-table-column prop="salesAmount" label="销售货款" />
        <el-table-column prop="outputTax" label="销项税额" />
        <el-table-column prop="totalAmountIncludingTax" label="价税合计" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize"
        @pagination="getInfo" />
    </div>
  </template>
  <script>
  import { sellReportList, productSalesSummaryExcel, productSalesDetailExcel, customerSalesSummaryExcel, customerSalesDetailExcel } from '@/api/reporting'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import { downfile } from '@/utils'
  import moment from "moment";
  
  export default {
    name: 'Productionplan',
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        q_p_formDate1: [],
        total: 0,
        query: {
          pageSize: 10,
          pageIndex: 1,
          query: {
            startDate: "",
            endDate: ""
          }
        },
        tableData: [],
      }
    },
    mounted() {
      this.getInfo()
      this.q_p_formDate1 = [this.query.query.startDate, this.query.query.startDate]
    },
    methods: {
      q_p_selectTimecreate(val){
        if(val){
          this.query.query.startDate = val[0]
          this.query.query.endDate = val[1]
        }else{
          this.query.query.startDate = ''
          this.query.query.endDate = ''
        }
      },
      getMoment(day) {
        if (!day) return "";
        return moment(day).format("YYYY-MM-DD");
      },
      async getInfo() {
        const { records, total } = await sellReportList(this.query)
        this.tableData = records
        this.total = total
      },
      search() {
        this.query.pageIndex = 1
        this.getInfo()
      },
      async handleExport(val) {
        switch (val) {
          case 1:
            try {
              await productSalesSummaryExcel(this.query.query)
            } catch (err) {
              const reader = new FileReader();
              reader.readAsText(err);
              reader.onload = (event) => {
                const resultString = reader.result; // 这里就是转换后的字符串
                if (resultString.includes('code') && resultString.includes('isSuccess')) {
                  this.$message.error(JSON.parse(resultString).message)
                } else {
                  downfile("货品销售汇总.xlsx", err);
                }
              }
            }
            break;
          case 2:
            try {
              await productSalesDetailExcel(this.query.query)
            } catch (err) {
              const reader = new FileReader();
              reader.readAsText(err);
              reader.onload = (event) => {
                const resultString = reader.result; // 这里就是转换后的字符串
                if (resultString.includes('code') && resultString.includes('isSuccess')) {
                  this.$message.error(JSON.parse(resultString).message)
                } else {
                  downfile("货品销售明细.xlsx", err);
                }
              }
            }
            break;
          case 3:
            try {
              await customerSalesSummaryExcel(this.query.query)
            } catch (err) {
              const reader = new FileReader();
              reader.readAsText(err);
              reader.onload = (event) => {
                const resultString = reader.result; // 这里就是转换后的字符串
                if (resultString.includes('code') && resultString.includes('isSuccess')) {
                  this.$message.error(JSON.parse(resultString).message)
                } else {
                  downfile("客户销售汇总.xlsx", err);
                }
              }
            }
            break;
          case 4:
            try {
              await customerSalesDetailExcel(this.query.query)
            } catch (err) {
              const reader = new FileReader();
              reader.readAsText(err);
              reader.onload = (event) => {
                const resultString = reader.result; // 这里就是转换后的字符串
                if (resultString.includes('code') && resultString.includes('isSuccess')) {
                  this.$message.error(JSON.parse(resultString).message)
                } else {
                  downfile("客户销售明细.xlsx", err);
                }
              }
            }
            break;
          default:
            break;
        }
      }
    }
  }
  </script>